<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="shortcut icon" type="image/ico" href="/go-captcha-example/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="/go-captcha-example/css/gocaptcha.global.css">
    <link rel="stylesheet" type="text/css" href="/go-captcha-example/css/toastify.css">
    <title>Native App</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            color: #3C3C3C;
            background: #EBF3FB;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .example {
            padding: 40px 0;
        }

        .box{
            margin: 30px;
        }
    </style>
</head>
<body>
<div class="example">
    <div class="box" id="click-wrap"></div>
    <div class="box" id="slide-wrap"></div>
    <div class="box" id="slide-region-wrap"></div>
    <div class="box" id="rotate-wrap"></div>
    <div class="box" id="button-wrap"></div>
</div>
<!-- GoCaptcha -->
<script type="text/javascript" src="/go-captcha-example/js/gocaptcha.global.js"></script>
<!-- Http Request -->
<script src="/go-captcha-example/js/axios.js"></script>
<!-- Request parameter serialization-->
<script src="/go-captcha-example/js/qs.js"></script>
<!-- Toast Tip -->
<script src="/go-captcha-example/js/toastify.js"></script>

<script type="text/javascript">
axios.defaults.baseURL = '/';

function toastSuccess(msg) {
    Toastify({
        text: msg,
        duration: 1000,
        newWindow: true,
        gravity: "top",
        position: "center",
        style: {
            background: "#f0f9eb",
            border: "1px solid #dcf9cc",
            color: "#5eaa2f",
            borderRadius: "6px",
            boxShadow: "1px 1px 10px #e0e0e0",
            padding: "8px 20px"
        },
    }).showToast();
}

function toastError(msg) {
    Toastify({
        text: msg,
        duration: 1000,
        newWindow: true,
        gravity: "top",
        position: "center",
        style: {
            background: "#fef0f0",
            border: "1px solid #fcd6d6",
            color: "#ed4630",
            borderRadius: "6px",
            boxShadow: "1px 1px 10px #e0e0e0",
            padding: "8px 20px"
        },
    }).showToast();
}


// Click Example
;(function (goCaptcha){
    const getDataApi = "/api/go-captcha-data/click-basic";
    const checkDataApi = "/api/go-captcha-check-data/click-basic";

    const el = document.getElementById("click-wrap");
    const capt = new goCaptcha.Click({
        width: 300,
        height: 220,
        // iconSize: 30,
    });

    var captKey = ''

    capt.mount(el)

    capt.setEvents({
        click(x,  y) {
            console.log('click - ', x, y)
        },
        confirm(dots, reset) {
            confirmEvent(dots)
        },
        refresh() {
            capt.clear()
            requestCaptchaData()
        },
        close() {
            console.log('>>>>> close')
        }
    })

    const requestCaptchaData = function() {
        capt.clear()
        captKey = ''
        axios({
            method: 'get',
            url: getDataApi,
        }).then(function(response){
            const data = response.data || {};
            if (data && (data['code'] || 0) === 0) {
                capt.setData({
                    image: data['image_base64'] || '',
                    thumb: data['thumb_base64'] || '',
                })
                captKey = data['captcha_key'] || ''
            } else {
                toastError(`get data failed`)
            }
        }).catch((e)=>{
            console.warn(e)
        })
    }

    const confirmEvent = function (dots) {
        const dotArr = []
        for (let i = 0; i < dots.length; i++) {
            const dot = dots[i]
            dotArr.push(dot.x, dot.y)
        }

        axios({
            method: 'post',
            url: checkDataApi,
            data: Qs.stringify({
                dots: dotArr.join(','),
                key: captKey || ''
            }),
        }).then(function (response){
            const data = response.data || {};
            if (data && (data['code'] || 0) === 0) {
                toastSuccess(`check data success`)
            } else {
                toastError(`check data failed`)
            }

            setTimeout(() => {
                requestCaptchaData()
            }, 500)
        }).catch((e)=>{
            console.warn(e)
        })
    }

    requestCaptchaData()
})(window.GoCaptcha || {})

// Slide Example
;(function (goCaptcha){
    const getDataApi = "/api/go-captcha-data/slide-basic";
    const checkDataApi = "/api/go-captcha-check-data/slide-basic";

    const el = document.getElementById("slide-wrap");
    const capt = new goCaptcha.Slide({
        width: 300,
        height: 220,
    });

    var captKey = ''

    capt.mount(el)

    capt.setEvents({
        move(x,  y) {
            console.log('move - ', x, y)
        },
        confirm(dots, reset) {
            confirmEvent(dots)
        },
        refresh() {
            capt.clear()
            requestCaptchaData()
        },
        close() {
            console.log('>>>>> close')
        }
    })

    const requestCaptchaData = function() {
        capt.clear()
        captKey = ''
        axios({
            method: 'get',
            url: getDataApi,
        }).then(function(response){
            const data = response.data || {};
            if (data && (data['code'] || 0) === 0) {
                capt.setData({
                    image: data['image_base64'] || '',
                    thumb: data['tile_base64'] || '',
                    thumbX: data['tile_x'] || 0,
                    thumbY: data['tile_y'] || 0,
                    thumbWidth: data['tile_width'] || 0,
                    thumbHeight: data['tile_height'] || 0,
                })

                captKey = data['captcha_key'] || ''
            } else {
                toastError(`get data failed`)
            }
        }).catch((e)=>{
            console.warn(e)
        })
    }

    const confirmEvent = function (point) {
        axios({
            method: 'post',
            url: checkDataApi,
            data: Qs.stringify({
                point: [point.x, point.y].join(','),
                key: captKey || ''
            }),
        }).then(function (response){
            const data = response.data || {};
            if (data && (data['code'] || 0) === 0) {
                toastSuccess(`check data success`)
            } else {
                toastError(`check data failed`)
            }

            setTimeout(() => {
                requestCaptchaData()
            }, 500)
        }).catch((e)=>{
            console.warn(e)
        })
    }

    requestCaptchaData()
})(window.GoCaptcha || {})

// SlideRegion Example
;(function (goCaptcha){
    const getDataApi = "/api/go-captcha-data/slide-region";
    const checkDataApi = "/api/go-captcha-check-data/slide-region";

    const el = document.getElementById("slide-region-wrap");
    const capt = new goCaptcha.SlideRegion({
        width: 300,
        height: 220,
    });

    var captKey = ''

    capt.mount(el)

    capt.setEvents({
        move(x,  y) {
            console.log('move - ', x, y)
        },
        confirm(dots, reset) {
            confirmEvent(dots)
        },
        refresh() {
            capt.clear()
            requestCaptchaData()
        },
        close() {
            console.log('>>>>> close')
        }
    })

    const requestCaptchaData = function() {
        capt.clear()
        captKey = ''
        axios({
            method: 'get',
            url: getDataApi,
        }).then(function(response){
            const data = response.data || {};
            if (data && (data['code'] || 0) === 0) {
                capt.setData({
                    image: data['image_base64'] || '',
                    thumb: data['tile_base64'] || '',
                    thumbX: data['tile_x'] || 0,
                    thumbY: data['tile_y'] || 0,
                    thumbWidth: data['tile_width'] || 0,
                    thumbHeight: data['tile_height'] || 0,
                })

                captKey = data['captcha_key'] || ''
            } else {
                toastError(`get data failed`)
            }
        }).catch((e)=>{
            console.warn(e)
        })
    }

    const confirmEvent = function (point) {
        axios({
            method: 'post',
            url: checkDataApi,
            data: Qs.stringify({
                point: [point.x, point.y].join(','),
                key: captKey || ''
            }),
        }).then(function (response){
            const data = response.data || {};
            if (data && (data['code'] || 0) === 0) {
                toastSuccess(`check data success`)
            } else {
                toastError(`check data failed`)
            }

            setTimeout(() => {
                requestCaptchaData()
            }, 500)
        }).catch((e)=>{
            console.warn(e)
        })
    }

    requestCaptchaData()
})(window.GoCaptcha || {})


// Rotate Example
;(function (goCaptcha){
    const getDataApi = "/api/go-captcha-data/rotate-basic";
    const checkDataApi = "/api/go-captcha-check-data/rotate-basic";

    const el = document.getElementById("rotate-wrap");
    const capt = new goCaptcha.Rotate({
        width: 300,
        height: 220,
    });

    var captKey = ''

    capt.mount(el)

    capt.setEvents({
        move(x,  y) {
            console.log('move - ', x, y)
        },
        confirm(dots, reset) {
            confirmEvent(dots)
        },
        refresh() {
            capt.clear()
            requestCaptchaData()
        },
        close() {
            console.log('>>>>> close')
        }
    })

    const requestCaptchaData = function() {
        capt.clear()
        captKey = ''
        axios({
            method: 'get',
            url: getDataApi,
        }).then(function(response){
            const data = response.data || {};
            if (data && (data['code'] || 0) === 0) {
                capt.setData({
                    image: data['image_base64'] || '',
                    thumb: data['thumb_base64'] || '',
                    thumbSize: data['thumb_size'] || 0,
                })

                captKey = data['captcha_key'] || ''
            } else {
                toastError(`get data failed`)
            }
        }).catch((e)=>{
            console.warn(e)
        })
    }

    const confirmEvent = function (angle) {
        axios({
            method: 'post',
            url: checkDataApi,
            data: Qs.stringify({
                angle: angle,
                key: captKey || ''
            }),
        }).then(function (response){
            const data = response.data || {};
            if (data && (data['code'] || 0) === 0) {
                toastSuccess(`check data success`)
            } else {
                toastError(`check data failed`)
            }

            setTimeout(() => {
                requestCaptchaData()
            }, 500)
        }).catch((e)=>{
            console.warn(e)
        })
    }

    requestCaptchaData()
})(window.GoCaptcha || {})


// Button Example
;(function (goCaptcha){
    const el = document.getElementById("button-wrap");
    const capt = new goCaptcha.Button();
    capt.mount(el)
    capt.setState({
        clickEvent: () => {
            toastSuccess(`Hello GoCaptcha!`)
        }
    })
})(window.GoCaptcha || {})

</script>
</body>
</html>
